import React from 'react';
import { SafeAreaView, View, VirtualizedList, StyleSheet, Text } from 'react-native';
const DATA = [];
const styles = StyleSheet.create({
	container: {
		flex: 1
	},
	item: {
		backgroundColor: '#f9c2ff',
		height: 150,
		justifyContent: 'center',
		marginVertical: 8,
		marginHorizontal: 16,
		padding: 20
	},
	title: {
		fontSize: 32
	}
});
const getItem = (data, index) => {
	return {
		id: Math.random().toString(12).substring(0),
		title: `Item ${index+1}`,
		key: `${index}`
	};
};
const getItemCount = () => {
	return 50;
};
const Item = ({ title })=> {
	return (
		<View style={styles.item}>
			<Text style={styles.title}>{title}</Text>
		</View>
	);
};
const VirtualizedListPage = () => {
	return (
		<SafeAreaView style={styles.container}>
			<VirtualizedList
    data={DATA}
    getItem={getItem}
    getItemCount={getItemCount}
    initialNumToRender={4}
    keyExtractor={item => item.key}
    renderItem={({ item }) => <Item title={item.title} />}
			/>
		</SafeAreaView>
	);
};

export default VirtualizedListPage;
